<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>OpenLayers v8.2.0 API - Module: ol/layer/WebGLTile</title>
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css"
        crossorigin="anonymous">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="styles/prettify-tomorrow.css">
    <link rel="stylesheet" type="text/css" href="styles/jaguar.css">
    <link rel="stylesheet" type="text/css" href="styles/carbon.css">
    <link rel="stylesheet" type="text/css" href="/theme/ol.css">
    <link rel="stylesheet" type="text/css" href="/theme/site.css">
</head>

<body>
    <header class="navbar navbar-expand-sm navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
        <a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70"
                alt="">&nbsp;OpenLayers</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu"
            aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- menu items that get hidden below 768px width -->
        <nav class="collapse navbar-collapse" id="olmenu">
            <ul class="nav navbar-nav ms-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button"
                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
                    <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
                        <a class="dropdown-item" href="/doc/">Docs</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="/doc/quickstart.html"><i
                                class="fa fa-check fa-fw me-2 fa-lg"></i>快速入门</a>
                        <a class="dropdown-item" href="/doc/faq.html"><i
                                class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
                        <a class="dropdown-item" href="/doc/tutorials/"><i
                                class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i
                                class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
                    </div>
                </li>
                <li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button"
                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-sitemap me-1"></i>API
                    </a>
                    <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
                        <a class="dropdown-item" href="/en/latest/apidoc/"><i
                                class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v8.2.0
                            (latest)</a </div>
                </li>
            </ul>
        </nav>
    </header>

    <div class="container-fluid">
        <div id="wrap" class="row">
            <div class="navigation col-md-4 col-lg-3">
                <div class="search-wrapper">
                    <div class="search">
                        <input id="search" type="text" autocomplete="off" class="form-control input-sm"
                            placeholder="Search Documentation">
                    </div>
                </div>
                <div class="navigation-list-wrapper">
                    <ul class="navigation-list search-empty">
                        <li class="item item-module toggle-manual toggle-manual-show"
                            data-longname="module:ol/layer/WebGLTile" data-name="ol/layer/webgltile">
                            <span class="title toggle">
                                <span class="fa fa-plus me-2 mt-1"></span>
                                <span><a href="module-ol_layer_WebGLTile.html">ol​/layer​/WebGLTile</a></span>
                            </span>
                            <div class="member-list" data-type="typedefs">
                                <span class="subtitle">Typedefs</span>
                                <ul>
                                    <li data-name="options"><a
                                            href="module-ol_layer_WebGLTile.html#~Options">Options</a>
                                    <li data-name="parsedstyle"><a
                                            href="module-ol_layer_WebGLTile.html#~ParsedStyle">ParsedStyle</a>
                                    <li data-name="sourcetype"><a
                                            href="module-ol_layer_WebGLTile.html#~SourceType">SourceType</a>
                                    <li data-name="style"><a href="module-ol_layer_WebGLTile.html#~Style">Style</a>
                                </ul>
                            </div>
                        <li class="loading">Loading …
                    </ul>
                </div>
            </div>

            <div class="main col-md-8 col-lg-9">
                <h1 class="page-title" data-filename="module-ol_layer_WebGLTile.html">Module: ol/layer/WebGLTile</h1>
                <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
                    <button id="latest-dismiss" type="button" class="btn-close" data-bs-dismiss="alert"
                        aria-label="Close"></button>
                    This documentation is for OpenLayers v<span id="package-version">8.2.0</span>. The <a
                        id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
                </div>




                <section class="content">

                    <header>
                        <h2 class="my-3">ol/layer/WebGLTile
                        </h2>
                        <br>




                        <div class="row p-3 ">
                            <!-- <div id="ad" class="col-lg-5 order-2 align-self-center border rounded bg-light ">
                                <script async type="text/javascript"
                                    src="https://cdn.carbonads.com/carbon.js?serve=CE7DV53U&placement=openlayersorg"
                                    id="_carbonads_js"></script>
                            </div> -->

                        </div>
                    </header>

                    <article>
                        <div class="container-overview">






                            <dl class="details">





















                            </dl>




                        </div>










                        <h3 class="subsection-title">Classes</h3>

                        <dl>
                            <dt><a href="module-ol_layer_WebGLTile-WebGLTileLayer.html">WebGLTileLayer</a></dt>
                            <dd></dd>
                        </dl>











                        <h3 class="subsection-title">Type Definitions</h3>

                        <dl>

                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~Options">
                                    </div>
                                    <h4 class="name">
                                        Options<span class="type-signature type object">{Object}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">



                                <dl class="details">


                                    <h5 class="subsection-title">Properties:</h5>

                                    <dl>

                                        <table class="props">
                                            <thead>
                                                <tr>

                                                    <th>Name</th>


                                                    <th>Type</th>

                                                    <th class="last">Description</th>
                                                </tr>
                                            </thead>

                                            <tbody>


                                                <tr>

                                                    <td class="name"><code>style</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_layer_WebGLTile.html#~Style">Style</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>应用于图层的样式。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>className</code></td>


                                                    <td class="type">


                                                        <span class="param-type">string</span>



                                                        <br>(defaults to 'ol-layer')


                                                    </td>

                                                    <td class="description last">
                                                        <p>设置到图层元素的CSS类名。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>opacity</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>



                                                        <br>(defaults to 1)


                                                    </td>

                                                    <td class="description last">
                                                        <p>不透明度（0，1）。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>visible</code></td>


                                                    <td class="type">


                                                        <span class="param-type">boolean</span>



                                                        <br>(defaults to true)


                                                    </td>

                                                    <td class="description last">
                                                        <p>可见。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>extent</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_extent.html#~Extent">Extent</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>图层渲染的边界范围。图层不会在此范围之外进行渲染。</p>
                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>zIndex</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>图层渲染的z-index。在渲染时，图层将按Z-index排序，然后按位置排序。当为<code>undefined</code>时,对于添加到地图的图层集合中的图层，假定
                                                            <code>zIndex</code> 为
                                                            0，而对于使<code>layers.setMap()</code>方法的图层，假定zIndex为<code>Infinity</code>。
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>minResolution</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>此图层可见的最小分辨率（含）。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>maxResolution</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>此图层将可见的最大分辨率（不包括）。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>minZoom</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>此图层将可见的最小视图缩放级别（不包括）。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>maxZoom</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>此图层可见的最大视图缩放级别（包括）。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>preload</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>



                                                        <br>(defaults to 0)


                                                    </td>

                                                    <td class="description last">
                                                        <p>预加载。将低分辨率图块加载到<code>预加载(preload)</code>级别。
                                                            <code>0</code>表示不预加载。
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>source</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_layer_WebGLTile.html#~SourceType">SourceType</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>此图层的源。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>sources</code></td>


                                                    <td class="type">


                                                        <span class="param-type">Array.&lt;SourceType></span>
                                                        |

                                                        <span class="param-type">function</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>此图层的源数组。优先于
                                                            <code>source</code>。可以是一个源数组，也可以是一个函数，该函数期望一个范围和分辨率（以视图投影单位每像素为单位），并返回一个源数组。
                                                            请参阅
                                                            <a
                                                                href="module-ol_source.html#.sourcesFromTileGrid"><code>sourcesFromTileGrid</code></a>，这是一个帮助函数，用于生成按照与瓦片网格相同的模式组织的金字塔中的源。
                                                            <strong>注意:</strong>所有源必须具有相同的波段数和内容。
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>map</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_Map-Map.html">Map</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>将图层设置为地图上的覆盖层。地图将不会在其图层集合中管理此图层，并且该图层将被渲染在顶部。这对于临时图层很有用。将图层添加到地图并由地图管理的标准方法是使用<a
                                                                href="module-ol_Map-Map.html#addLayer"><code>addLayer</code></a>.
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>useInterimTilesOnError</code></td>


                                                    <td class="type">


                                                        <span class="param-type">boolean</span>



                                                        <br>(defaults to true)


                                                    </td>

                                                    <td class="description last">
                                                        <p>在错误时使用临时图块。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>cacheSize</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>



                                                        <br>(defaults to 512)


                                                    </td>

                                                    <td class="description last">
                                                        <p>内部纹理缓存大小。这需要足够大，以呈现两个缩放级别的图块。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>properties</code></td>


                                                    <td class="type">


                                                        <span class="param-type">Object.&lt;string, *></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p> 任意可观察属性。可以使用<code>#get()</code> and <code>#set()</code>访问。
                                                        </p>

                                                    </td>
                                                </tr>


                                            </tbody>
                                        </table>
                                    </dl>






















                                </dl>



                            </dd>



                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~ParsedStyle">
                                    </div>
                                    <h4 class="name">
                                        ParsedStyle<span class="type-signature type object">{Object}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">



                                <dl class="details">


                                    <h5 class="subsection-title">Properties:</h5>

                                    <dl>

                                        <table class="props">
                                            <thead>
                                                <tr>

                                                    <th>Name</th>


                                                    <th>Type</th>

                                                    <th class="last">Description</th>
                                                </tr>
                                            </thead>

                                            <tbody>


                                                <tr>

                                                    <td class="name"><code>vertexShader</code></td>


                                                    <td class="type">


                                                        <span class="param-type">string</span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>顶点着色器。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>fragmentShader</code></td>


                                                    <td class="type">


                                                        <span class="param-type">string</span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>片段着色器。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>uniforms</code></td>


                                                    <td class="type">


                                                        <span class="param-type">Object&lt;UniformValue></span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>统一定义。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>paletteTextures</code></td>


                                                    <td class="type">


                                                        <span class="param-type">Array&lt;PaletteTexture></span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>调色板纹理。</p>

                                                    </td>
                                                </tr>


                                            </tbody>
                                        </table>
                                    </dl>






















                                </dl>



                            </dd>



                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~SourceType">
                                    </div>
                                    <h4 class="name">
                                        SourceType<span
                                            class="type-signature type module:ol/source/datatile~datatilesource">{<a
                                                href="module-ol_source_DataTile-DataTileSource.html">DataTileSource</a>}</span>
                                        <span class="type-signature type module:ol/source/tileimage~tileimage">{<a
                                                href="module-ol_source_TileImage-TileImage.html">TileImage</a>}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">



                                <dl class="details">





















                                </dl>



                            </dd>



                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~Style">
                                    </div>
                                    <h4 class="name">
                                        Style<span class="type-signature type object">{Object}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">

                                <div class="description">
                                    <p>将平铺数据转换为渲染的像素。</p>
                                </div>



                                <dl class="details">


                                    <h5 class="subsection-title">Properties:</h5>

                                    <dl>

                                        <table class="props">
                                            <thead>
                                                <tr>

                                                    <th>Name</th>


                                                    <th>Type</th>

                                                    <th class="last">Description</th>
                                                </tr>
                                            </thead>

                                            <tbody>


                                                <tr>

                                                    <td class="name"><code>variables</code></td>


                                                    <td class="type">


                                                        <span class="param-type">Object.&lt;string,
                                                            (string|number)></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>样式变量。每个变量必须包含一个数字或字符串。
                                                            这些变量可以在<code>color</code>,
                                                            <code>亮度(brightness)</code>, <code>对比度(contrast)</code>,
                                                            <code>曝光度(exposure)</code>, <code>饱和度(saturation)</code> and
                                                            <code>伽马(gamma)</code>
                                                            <a
                                                                href="module-ol_expr_expression.html#~ExpressionValue"><code>表达式(expressions)</code></a>中使用，
                                                            使用<code>['var', 'varName']</code> 运算符。要更新样式变量，请使用<a
                                                                href="module-ol_layer_WebGLTile-WebGLTileLayer.html#updateStyleVariables"><code>updateStyleVariables</code></a>
                                                            方法。
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>color</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_expr_expression.html#~ExpressionValue">ExpressionValue</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>应用于颜色值的表达式。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>brightness</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_expr_expression.html#~ExpressionValue">ExpressionValue</a></span>



                                                        <br>(defaults to 0)


                                                    </td>

                                                    <td class="description last">
                                                        <p>用于减小或增加图层亮度的值。值的范围是-1到1。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>contrast</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_expr_expression.html#~ExpressionValue">ExpressionValue</a></span>



                                                        <br>(defaults to 0)


                                                    </td>

                                                    <td class="description last">
                                                        <p>用于减小或增加图层对比度的值。值的范围是-1到1。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>exposure</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_expr_expression.html#~ExpressionValue">ExpressionValue</a></span>



                                                        <br>(defaults to 0)


                                                    </td>

                                                    <td class="description last">
                                                        <p>用于减小或增加图层曝光度的值。值的范围是-1到1。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>saturation</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_expr_expression.html#~ExpressionValue">ExpressionValue</a></span>



                                                        <br>(defaults to 0)


                                                    </td>

                                                    <td class="description last">
                                                        <p>用于减小或增加图层饱和度的值。值的范围是-1到1。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>gamma</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_expr_expression.html#~ExpressionValue">ExpressionValue</a></span>



                                                        <br>(defaults to 1)


                                                    </td>

                                                    <td class="description last">
                                                        <p>对图层应用伽马校正。值的范围是从0到无穷大。</p>

                                                    </td>
                                                </tr>


                                            </tbody>
                                        </table>
                                    </dl>






















                                </dl>



                            </dd>

                        </dl>



                    </article>

                </section>




            </div>
        </div>
    </div>
    <script>prettyPrint();</script>
    <script src="scripts/linenumber.js"></script>
    <script src="scripts/main.js"></script>
</body>

</html>